<template>
	<view class="switch" @click="click">
		<image class="img" :src="state ? switchOnPath : switchOffPath" mode=""></image>
		<view class="loading" v-if="loading">
			<uni-icons class="icon" :size="26" color="#ffffff" type="spinner-cycle"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name:"vswitch",
		data() {
			return {
				switchOnPath: require('@/static/image/mipmap-xhdpi/on.png'),
				switchOffPath: require('@/static/image/mipmap-xhdpi/off.png'),
				state: false
			};
		},
		methods:{
			click(){
				if(!this.disabled){
					this.$emit('click')
					this.$emit('change', !this.state)
				}
			}
		},
		props:{
			loading: {
				default: false,
				type: Boolean
			},
			disabled: {
				default:false,
				type: Boolean
			},
			value: {
				default: false,
				type: Boolean
			}
		},
		watch:{
			value: {
				handler(val){
					this.state = val;
				},
				immediate:true
			}
		}
	}
</script>

<style lang="scss" scoped>
.switch{
	width: 141.85rpx;
	height: 55.09rpx;
	position: relative;
	.loading{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0,0,0, 0.2);
	}
	.img{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
}
.icon{
	display: block;
	transition: 0.5s;
	animation: rotate 2s linear infinite;
}
@keyframes rotate{
	0%{
		transform: rotate(0);
	}
	50%{
		-webkit-transform: rotate(180deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
</style>
